import React from 'react';
import ReactDOM from 'react-dom';
import * as echarts from 'echarts';

import EchartsBarChart_bg from './assets/BarChartBg.svg';

class EchartsBarChart2 extends React.Component {
    

    componentDidMount(){
        this.initCharts();
    }
    //初始化
    initCharts = () => {
        //确定横坐标有多少个聚类
        let Xnum =[];
        for (var i =0 ;i<this.props.data[this.props.clusterNum-1].length;i++){
            Xnum.push('C'+(i).toString());
        }
        //alert(this.props.clusterNum);
        //确定每个柱形的纵坐标值
        let Ynum =[];
        for (var i=0;i<this.props.data[this.props.clusterNum-1].length;i++){
            Ynum.push(this.props.data[this.props.clusterNum-1][i].length);
        }
        let myChart = echarts.init(document.getElementById('myChart2'));
        let option = {
            color:this.props.BarColor,
            title: {
                text: "Cluster Length",
                padding:[8,0,0,58],
                textStyle:{
                    fontFamily:'苹方',
                    fontSize:12,
                    color:'white',
                }
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                data: Xnum,
                axisLabel:{
                    fontFamily:'苹方',
                    fontSize:9,
                    color:'white',
                },
                splitLine:{
                    show:false,
                }
              },
              yAxis: {
                type: 'value',
                axisLabel:{
                    fontFamily:'苹方',
                    fontSize:10,
                    color:'white',
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:'white'
                    }
                }
              },
              series: [{
                data: Ynum,
                type: 'bar'
              }],
              
              grid:{
               x:35,
               y:29,
               x2:0,
               y2:18,
               
              },
        };
        myChart.setOption(option,true);
    }
    render(){
        return (
            <div>
                <div id="myChart2" style={{width:'180px',height:'123px',zIndex:'999',position:'absolute'}}></div>
                <img src={EchartsBarChart_bg} style={{zIndex:'998',marginLeft:'-5px'}}></img>
            </div>
        )
    }
}

export default EchartsBarChart2;
